<script setup>
import {RouterView} from 'vue-router'
import search from '../components/search.vue'
import asideMenu from '../components/asideMenu.vue'
import footview from './footView.vue'
//发起请求游客登录
//  proxy.$https.login()
//   .then((res)=>{
//     if(res.data.code===200){
//       store.isLogin.value = res.data
//       sessionStorage.setItem("userMsg",JSON.stringify(res.data))
//       ElMessage({
//         message: `欢迎游客${res.data.userId}`,
//         type: 'success',
//       })
//     }
//   })
ElNotification({
        message: `<div style="display:flex;align-items: center;">
          <img width='50px' src="http://127.0.0.1:5173/src/assets/OIP-C.jpg"/>
          <span>由于后端接口限制，请求次数过多会被阻止，还望谅解！</span></div>`,
        showClose: false,
        dangerouslyUseHTMLString:true,
        duration:5000,
        position: 'top-left',
     })
</script>

<template>
        
  <div class="common-layout">
    <el-container>
      <!-- 头部 -->
        <el-header>
          <div @click="$router.push('/index')" class="headerLeft">
            <img  src="../assets/OIP-C.jpg" alt="">
            <h1>米兔音乐</h1>
          </div>
          <div class="headerRight">
            <!-- 搜索组件 -->
            <search></search>
            <el-popover
              :width="300"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
            >
              <template #reference>
                <el-avatar src="http://127.0.0.1:5173/src/assets/OIP-C.jpg"/>
              </template>
              <template #default>
                <div
                  class="demo-rich-conent"
                  style="display: flex; gap: 16px; flex-direction: column"
                >
                  <el-avatar
                    :size="60"
                    src="http://127.0.0.1:5173/src/assets/OIP-C.jpg"
                    style="margin-bottom: 8px"
                  />
                  <div>
                    <p
                      class="demo-rich-content__name"
                      style="margin: 0; font-weight: 500"
                    >
                      欢迎欢迎
                    </p>
                    <p
                      class="demo-rich-content__mention"
                      style="margin: 0; font-size: 14px; color: var(--el-color-info)"
                    >
                      @element-plus感谢支持！
                    </p>
                  </div>

                  <p class="demo-rich-content__desc" style="margin: 0">
                    本项目尚在开发阶段，目前只支持游客登录，有任何的bug和不足请联系项目组，望请谅解！
                  </p>
          </div>
        </template>
          </el-popover>
          </div>
        </el-header>
      
      <!-- 主体 -->
      <el-main class="main">
        <!-- 侧边栏 -->
        <div class="aside">
          <el-aside  width="400px">
          <asideMenu></asideMenu>
        </el-aside>
        </div>
        
        <!-- 内容 -->
        <el-main class="smallMain">
          <Suspense>
            <RouterView></RouterView>
          </Suspense>
        </el-main>

      </el-main>
      <!-- footer -->
        <el-footer>
          <footview></footview>
        </el-footer>
      
      
    </el-container>
  </div>


</template>

<style scoped>
.el-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding-left: 50px;
  padding-right: 50px;
}

.headerLeft{
  display: flex;
  align-items: center;
  cursor: pointer;
}
.headerLeft h1{
  color: rgba(76, 76, 76);
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-shadow: 5px 3px #ccc;
  font-weight: 600;
}
.main {
    display: flex;
}
/* .el-main{
    padding: 0;
    height: 1000px;
} */
.aside{
  width: 224px;
  height: 500px;
  position: sticky;
  left: 0;
}

img{
    width: 80px;
}
.smallMain{
  margin-left: 10px;
  margin-top: 0;
  height: 600px;
  
}
.smallMain::-webkit-scrollbar {
    display: none;
}
.headerRight{
  display: flex;
  justify-content: center;
}
/* .el-aside{
  position: fixed;
  left: 0;
} */
/* .el-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100px;
    background-color: white;
    
}
.headerRight{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 500px;
} */
 .el-footer{
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: solid 1px #ccc;
  background-color: #efefef;
  box-shadow: 0px -3px 3px #ccc;
  z-index: 10;
}   

</style>